<template>
  <div class="container container-waterfall">
    <div class="row">
      <div class="box" v-for="(item,i) in art.artData"  :key="i" v-show="(i*6)+6 <= art.count">
        <div class="item" v-if="(i*6)+6 <= art.count">
          <div class="item-bottom" v-if="i >= 3" >
            <div class="active"  @mouseenter="art.artData[(i*6)+2].isActive = true" @mouseleave="art.artData[(i*6)+2].isActive = false">
              <el-image v-if="!art.artData[(i*6)+2].isActive" :src="art.artData[(i*6)+2].Img" fit="cover"></el-image>
              <div  class="el-image mask" v-if="art.artData[(i*6)+2].isActive"  @click="see(art.artData[(i*6)+2].details)">
                <div class="products-e"><p v-html="art.artData[(i*6)+2].EnglishName"></p></div>
                <div class="products-tag">{{art.artData[(i*6)+2].tag}}</div>
                <div class="products-title"><p  v-html="art.artData[(i*6)+2].title"></p></div>
              </div>
            </div>
          </div>
          <div class="item-top">
            <div class="active" @mouseenter="art.artData[i*6].isActive = true" @mouseleave="art.artData[i*6].isActive = false" >
            <el-image v-show="!art.artData[i*6].isActive" :src="art.artData[i*6].Img" fit="cover" ></el-image>
            <div  class="el-image mask" v-show="art.artData[i*6].isActive"  @click="see(art.artData[i*6].details)">
              <div class="products-e"><p v-html="art.artData[i*6].EnglishName"></p></div>
              <div class="products-tag">{{art.artData[i*6].tag}}</div>
              <div class="products-title"><p  v-html="art.artData[i*6].title"></p></div>
            </div>
            </div>
            <div class="active"  @mouseenter="art.artData[(i*6)+1].isActive = true" @mouseleave="art.artData[(i*6)+1].isActive = false">
              <el-image v-show="!art.artData[(i*6)+1].isActive" :src="art.artData[(i*6)+1].Img" fit="cover"></el-image>
              <div  class="el-image mask" v-show="art.artData[(i*6)+1].isActive"  @click="see(art.artData[(i*6)+1].details)">
                <div class="products-e"><p v-html="art.artData[(i*6)+1].EnglishName"></p></div>
                <div class="products-tag">{{art.artData[(i*6)+1].tag}}</div>
                <div class="products-title"><p  v-html="art.artData[(i*6)+1].title"></p></div>
              </div>
            </div>
          </div>
          <div class="item-bottom" v-if="i < 3">
            <div class="active" @mouseenter="art.artData[(i*6)+2].isActive = true" @mouseleave="art.artData[(i*6)+2].isActive = false">
              <el-image v-show="!art.artData[(i*6)+2].isActive" :src="art.artData[(i*6)+2].Img" fit="cover"></el-image>
              <div  class="el-image mask" v-show="art.artData[(i*6)+2].isActive"  @click="see(art.artData[(i*6)+2].details)">
                <div class="products-e"><p v-html="art.artData[(i*6)+2].EnglishName"></p></div>
                <div class="products-tag">{{art.artData[(i*6)+2].tag}}</div>
                <div class="products-title"><p  v-html="art.artData[(i*6)+2].title"></p></div>
              </div>
            </div>
          </div>
        </div>
        <div class="item" v-if="(i*6)+6 <= art.count">
          <div class="item-bottom" v-if="i < 3">
            <div class="active" @mouseenter="art.artData[(i*6)+3].isActive = true" @mouseleave="art.artData[(i*6)+3].isActive = false">
              <el-image v-show="!art.artData[(i*6)+3].isActive" :src="art.artData[(i*6)+3].Img" fit="cover"></el-image>
              <!-- <el-image v-show="art.artData[(i*6)+3].isActive" :src="art.artData[(i*6)+3].Mask" fit="cover" @click="see(art.artData[(i*6)+3].details)"></el-image> -->
              <div  class="el-image mask" v-show="art.artData[(i*6)+3].isActive"  @click="see(art.artData[(i*6)+3].details)">
                <div class="products-e"><p v-html="art.artData[(i*6)+3].EnglishName"></p></div>
                <div class="products-tag">{{art.artData[(i*6)+3].tag}}</div>
                <div class="products-title"><p  v-html="art.artData[(i*6)+3].title"></p></div>
              </div>
            </div>
          </div>
          <div class="item-top">
            <div class="active" @mouseenter="art.artData[(i*6)+4].isActive = true" @mouseleave="art.artData[(i*6)+4].isActive = false">
              <el-image v-show="!art.artData[(i*6)+4].isActive" :src="art.artData[(i*6)+4].Img" fit="cover"></el-image>
              <div  class="el-image mask" v-show="art.artData[(i*6)+4].isActive"  @click="see(art.artData[(i*6)+4].details)">
                <div class="products-e"><p v-html="art.artData[(i*6)+4].EnglishName"></p></div>
                <div class="products-tag">{{art.artData[(i*6)+4].tag}}</div>
                <div class="products-title"><p  v-html="art.artData[(i*6)+4].title"></p></div>
              </div>
            </div>
            <div class="active" @mouseenter="art.artData[(i*6)+5].isActive = true" @mouseleave="art.artData[(i*6)+5].isActive = false">
              <el-image v-show="!art.artData[(i*6)+5].isActive" :src="art.artData[(i*6)+5].Img" fit="cover"></el-image>
              <div  class="el-image mask" v-show="art.artData[(i*6)+5].isActive"  @click="see(art.artData[(i*6)+5].details)">
                <div class="products-e"><p v-html="art.artData[(i*6)+5].EnglishName"></p></div>
                <div class="products-tag">{{art.artData[(i*6)+5].tag}}</div>
                <div class="products-title"><p  v-html="art.artData[(i*6)+5].title"></p></div>
              </div>
            </div>
            
          </div>
          <div class="item-bottom" v-if="i >= 3">
            <div class="active" @mouseenter="art.artData[(i*6)+3].isActive = true" @mouseleave="art.artData[(i*6)+3].isActive = false">
              <el-image v-show="!art.artData[(i*6)+3].isActive" :src="art.artData[(i*6)+3].Img" fit="cover"></el-image>
              <div  class="el-image mask" v-show="art.artData[(i*6)+3].isActive"  @click="see(art.artData[(i*6)+3].details)">
                <div class="products-e"><p v-html="art.artData[(i*6)+3].EnglishName"></p></div>
                <div class="products-tag">{{art.artData[(i*6)+3].tag}}</div>
                <div class="products-title"><p  v-html="art.artData[(i*6)+3].title"></p></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="懒精灵色彩艺术中心"
      :visible.sync="dialogVisible"
      width="960px"
      center
      >
      <div class="dialog-theme">
        <h3>{{artDialog.title}}</h3>
        <el-image :src="artDialog.Img" fil="cover"></el-image>
      </div>
      <div class="dialog-item">
        <div class="dialog-list" v-for="(item,i) in artDialog.item" :key="i" v-show="item.title != CardColor" >
          <h3 class="dialog-list-title">{{item.title}}</h3>
          <span v-if="item.content">{{item.content}}</span>
          <el-image v-if="item.Img" :src="item.Img" fil="cover" :class="{wh:item.wh}"></el-image>
        </div>
        <div class="dialog-list" v-if="artDialog.cardShow">
          <h3 class="dialog-list-title">系列色卡</h3>
          <el-image src="http://r4kwyi39b.hd-bkt.clouddn.com/homebg.png" fil="cover"></el-image>
        </div>
      </div>
      

      <span slot="footer" class="dialog-footer">
      </span>
    </el-dialog>
  </div>
</template>
<script>
import './css.css'
export default {
  data(){
    return{
      dialogVisible: false,
      counts:null,
      art:{
        count:null,  
        artData:null
      },
      artDialog:{
        "id":1,
        "title":"",
        "Img":"",
        "item":"",
      },
      CardColor:"系列色卡"
      
    }
  },
  methods:{
    //获取数据
    async getData(){
      const {data:ret} = await this.$http.get('/static/data.json')
      let arr = []
      arr = ret.data.art
      console.log(arr)
      this.art = arr 
      this.counts = this.art.count
      this.artData = this.art.artData
      console.log(this.art)
    },
    see(data){
      console.log(data)
      this.artDialog = data
      console.log(data.item.length)
      this.artDialog.cardShow = data.item[data.item.length-1].title == this.CardColor
      
      this.dialogVisible = true
    },
    handleClose() {
    }
  },
  mounted(){
    this.getData()
    
  },
}
</script>

<style lang='less' scoped>
.container-waterfall{
  height: 3600px;
  overflow: hidden;
  .row{
    height: 4320px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    .box{
      width: 50%;
      .item{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 720px;
        .item-top{
          display: flex;
          
          height: 240px;
          box-sizing: border-box;
          .el-image{
            flex: 1;
            width: 100%;
            height: 240px;
          }
        }
        .item-bottom{
          
          height: 480px;
          .el-image{
            width: 100%;
            height: 480px;
            overflow: hidden;
          }
        }
      }
    }
  }
  
}
.active{
  flex: 1;
}

.el-dialog{
  .el-dialog__body{
    .dialog-theme{
      text-align: center;
      h3{
        font-size: 24px;
        margin: 1rem 0;
      }
      .el-image{
        width: 100%;
        height: 338px;
      }
    }
    .dialog-item{
      text-align: center;
      color: #277457;
      .dialog-list{
        .dialog-list-title::after{
          content: "";
          display: block;
          width: 3rem;
          height: 0.15rem;
          background-color: #277457;
          margin: 1rem auto 0;
        }
      }
    }
  }
}
.wh{
  width: 100%;
  height: 200px;
}
.mask{
  background: #77b828;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  .products-e{
    font-size: 0.8em;
    p{
      margin-bottom: 2px;
    }
  }
  .products-tag{
    font-size: 0.8em;
  }
  .products-tag::after{
    content:"";
    display: block;
    width: 2em;
    height: 1px;
    background: #fff;
    margin: .6em auto .3em;
  }
  .products-title{
    font-size: 1.5em;
    font-weight: 500;
    p{
      margin-top: .5rem;
    }
  }
}
</style>
 v-if=" !( i%4) || !((i+1)%4)"